<?php

/* @var $this yii\web\View */
use yii\helpers\Html;
$this->title = 'My Yii Application';
$css='#result li{text-align:center;width:4rem;margin-bottom:5px;padding-bottom:3px;border-bottom:1px dashed}.tab-content{margin-top:10px}';
$this->registerCss($css);

$js=<<<JS
    $('#sumit').click(
        function(){
            var data=$('#form').serialize();
            $.post('',data,function(re){
                if (re.status==0){
                    $('#result').empty();
                    $('#bulletin1').html(re.data.join(' '));
                    var ori=document.querySelector('textarea').value.replace(/[^\u4e00-\u9fa5]*/g,'');
                    re.data.forEach(function(item,index){
                        $('#result').append('<li ><div>'+item+'</div><div>'+ori[index]+'</div></li>');                        
                    });
                }
            },'json');
        }
    );

$(document).ready(function(){
                        $('#myTab a').click(function(){
                            $(this).tab('show')
                        })
                    });

JS;
$this->registerJs($js);


?>
<div class="site-index">

    <div class="body-content">

        <form id="form">
                <div >
                    <h2 class="h24">汉字转拼音</h2>
                    <hr/>
                    <div class="form-group">
                        <label >输入需要转换的内容：</label><span class="help-block">符号，数字，字母将被忽略</span>
                        <textarea name="words" class="form-control" rows="3" placeholder="好好学习，天天向上"></textarea></div>

                    <div class="form-group">
                        <label >是否含音调：</label>
                        <input type="radio" name="tone" value="1" id="r1" checked><label for="r1" style="color:#888888">是</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="tone" value="2" id="r2"><label for="r2" style="color:#b8b8b8">否</label>
                    </div>

                    <div class="form-group">
                        <label >是否人名：</label>
                        <input type="radio" name="name" value="1" id="r3"><label for="r3" style="color:#888888">是</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="name" value="2" id="r4" checked><label for="r4" style="color:#b8b8b8">否</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="form-group text-center">
                        <button type="button"  class="btn btn-primary" id="sumit">&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;</button>
                        <button type="reset"  class="btn btn-danger">&nbsp;&nbsp;重&nbsp;置&nbsp;&nbsp;</button>
                    </div>
                </div>

            <div >
                <hr />
                <h3 class="h24">转换结果</h3>
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active"><a href="#rule1">逐字比对</a></li>
                    <li><a href="#bulletin1">连续结果</a></li>

                </ul>
                <div id="mytab-content2" class="tab-content">
                    <div class="tab-pane fade in active" id="rule1">
                        <ul id="result" class="list-inline" >
                            <li><div>hǎo</div><div>好</div></li><li><div>hào</div><div>好</div></li><li><div>xué</div><div>学</div></li><li><div>xí</div><div>习</div></li><li><div>tiān</div><div>天</div></li><li><div>tiān</div><div>天</div></li><li><div>xiàng</div><div>向</div></li><li><div>shàng</div><div>上</div></li>
                        </ul>
                    </div>
                    <div class="tab-pane fade  " id="bulletin1">
                        hǎo hào xué xí tiān tiān xiàng shàng
                    </div>


                </div>

            </div>
         </form>

    </div>
</div>
